<template>
  <div class="page-icp">
    <div class="icp-item"><img :src="icp1" /></div>
    <div class="icp-item icp-2"><img :src="icp2" @click="scale()"/></div>
    <div class="icp-item" v-for="(item,index) in imgs" :key="index">
      <img :src="item" />
    </div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="center" class="pop-wrap mi-wrap" >
      <div class="pop-con"><img :src="icpbig2"></div>
    </mt-popup>
  </div>
</template>

<script>
import { Popup } from "mint-ui";
export default {
  name: "icp",
  data() {
    return {
      popupVisible: false,
      icp1: require("@/public/imgs/icp-i-1.png"),
      icp2: require("@/public/imgs/icp-i-2.jpg"),
      icpbig2: require("@/public/imgs/icp-i-2.jpg"),
      imgs: [
        require("@/public/imgs/icp-i-3.png"),
        require("@/public/imgs/icp-i-4.png"),
        require("@/public/imgs/icp-i-5.png")
      ]
    };
  },
  methods: {
    scale() {
      this.popupVisible = true;
      this.eventDefault(".mi-wrap");
    },
    eventDefault(selector) {
      //弹出框 页面滚动穿透解决
      this.$nextTick(function() {
        var vModel = document.querySelector(selector);
        vModel.addEventListener("touchmove", function(e) {
          e.preventDefault();
        });
      });
    }
  }
};
</script>

<style lang="less">
.page-icp {
  .icp-item {
    img {
      display: block;
      max-width: 100%;
      width: 100%;
      border: 0;
      margin: 0;
    }
  }
  .icp-2 {
    padding: 50px;
    margin: 0 auto 60px;
    img {
      box-shadow: 5px 5px 20px rgba(221,221,221,0.5);
      padding: 40px 50px;
    }
  }
  .pop-wrap {
    padding: 0 40px;
    width: 100%;
    background: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    // .pop-con {
    //   padding: 50px 40px;
    //   background: #fff;
    //   border-radius: 10px;
    // }
  }
}
</style>
